<template>
  <div class="bg-white border border-custom-border overflow-hidden cursor-pointer rounded-[6px]"
    v-for="item in cardData" :key="item.id" @click="handleCardClick(item)">
    <div class="w-full h-[172px] bg-no-repeat bg-auto bg-center p-[10px]"
      :style="'background-image: url(' + item.cover + ');'">
      <span
          v-if="item.status"
          class="text-white text-sm px-2 py-0.5 bg-gradient-to-r h-6 w-14 rounded-[4px] mr-1"
        :class="statusColor(item.status)">
        {{ statusText(item.status) }}
      </span>
      <span
          v-else
          class="text-white text-sm px-2 py-0.5 bg-gradient-to-r h-6 w-14 rounded-[4px]"
        :class="statusColor(item.status)">
        {{ statusText(item.status) }}
      </span>
    </div>
    <div class="px-4 py-4">
      <div class="flex items-center justify-between">
        <span class="text-custom-text text-base font-semibold">{{ item.name }}</span>
        <div class="flex items-center gap-2">
          <img src="@/assets/images/star.png" alt="">
          <img src="@/assets/images/star.png" alt="">
          <img src="@/assets/images/star.png" alt="">
        </div>
      </div>
      <div class="mt-2 flex items-center justify-between">
        <p class="card-content-item">得分: <span class="text-custom-text/65">{{ item.score }}</span></p>
        <p class="card-content-item">建议时长: <span class="text-custom-text/65">{{item.duration}}分钟</span></p>
      </div>
      <p class="card-content-item">上次考核: <span class="text-custom-text/65">{{ item.last_exam_time || '-' }}</span></p>
    </div>
  </div>
</template>
<script setup>
import { computed, toRefs } from 'vue'
const props = defineProps({
  cardData: {
    type: Array,
    default: []
  }
})
const emit = defineEmits(['cardClick'])
const handleCardClick = (id) => {
  emit('cardClick', id)
}
const { cardData } = toRefs(props)
const statusColor = computed(() => (status) => {
  if (status === '1') {
    return 'from-[#E4E3E3] to-[#7D7D7D]'
  } else if (status === '2') {
    return 'from-[#F4E377] to-[#FA9600]'
  } else if (status === '3') {
    return 'from-[#69E3AC] to-[#19B21E]'
  } else if (status === '4') {
    return 'from-[#33C9FF] to-[#33A0FF]'
  } else if (status === '5') {
    return 'from-[#FCB191] to-[#FC474C]'
  } else {
    return 'from-[#E4E3E3] to-[#7D7D7D]'
  }
})
const statusText = computed(() => (status) => {
  if (status === '1') {
    return '已通关'
  } else if (status === '2') {
    return '未通关'
  } else if (status === '3') {
    return '待通关'
  } else if (status === '4') {
    return '已通关'
  } else if (status === '5') {
    return '未通关'
  } else {
    return '未考核'
  }
})

</script>